<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .row{ margin: 0;}
        .name { float: right;}
        .shop-img{ text-align: left; padding-left: 30px;}
        .shop-img img{ margin-right: 10px;}
        .panel-body{ padding-bottom:15px; }
        #tbodyId{ font-size: 13px;}
        #myTable thead{ font-size: 14px;}
        /*.list-img{ text-align: left;}*/
        .list-img .s-img{ float: left; width: 106px; height: 60px; margin: 0 10px 0 20px; _display: inline; overflow: hidden;}
        .list-img .s-img img{ display: block; margin: 0 auto;}
        .list-img span{ line-height: 60px;}
        .list-name span{display: block; }
    </style>
</head>
<body>
<shiro:hasPermission name="sys:product:add">
    <input id="p_add"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:update">
    <input id="p_update"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:delete">
    <input id="p_delete"  value="1" type="hidden">
</shiro:hasPermission>
<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>该页面显示了所有代理商订单。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body row name">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="form-group">
                <select class="form-control" name="status" id="status">
                    <option value="">选择协议状态</option>
                    <option value="1">待支付</option>
                    <option value="2">购买成功</option>
                    <option value="3">已关闭</option>
                    <option value="4">返现中</option>
                    <option value="5">已到期</option>
                </select>&nbsp;&nbsp;
                <div id="start_visit_time" class="input-group date form_datetime">
                    <span class="input-group-addon">开始日期</span>
                    <input id="createTime" name="createTime" class="form-control" size="15" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>&nbsp;&nbsp;
                <input type="text" class="form-control" id="queryStr" size="42" placeholder="请输入协议号/协议名称/下单人姓名或手机号">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
            </div>
        </form>
    </div>
    <div class="panel-heading row">
        <button type="button" class="btn btn-primary" onclick="exportOrderList();">导出订单</button>
    </div>
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${basePath}/admin/agent/order/queryOrder?type=3"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th  data-type="xuhao">序号</th>
                    <th  width="300s" data-field="protocolName" data-call="true">协议信息</th>
                    <th  data-field="name" data-call="true">签约人</th>
                    <th  data-field="createTime" data-call="true">签约时间</th>
                    <th  data-field="moneyCount">签约金额</th>
                    <th  data-field="status" data-call="true">订单状态</th>
                    <th  data-field="button" data-call="true">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">

                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <div class="row">
            <div align="left" class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="pageCount"></span> <select
                        id="pageSize" onchange="search(1)" class="form-control"
                        style="width: 100px"></select>
                </div>
            </div>
            <div align="right" class="col-xs-6">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
    </div>
</div>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    //循环列表数据以及操作按钮
    function tableCallBack(data, id){
        if(id == 'button') {//增加操作按钮
            console.log(data.orderIdStr);
            var count = 0;
            var _button = '<button type="button" class="btn btn-white btn-xs" name="' + data.orderIdStr + '" onclick="viewMeal(this);">查看 </button> ';
            return _button;
        }else if(id == "status") {
            if (data[id] == '1') {
                return '待支付';
            } else if (data[id] == '2') {
                return '购买成功';
            } else if (data[id] == '3') {
                return '已关闭';
            } else if (data[id] == '4') {
                return '返现中';
            } else if (data[id] == '5') {
                return '已到期';
            }
        }
        else if(id == "protocolName"){
            var temp = "<div class='shop-img'>";
            if(data.productUrl && data.productUrl.length > 7) {
                temp += "<img src='" + data.productUrl + "' height='60' width='80'>"
            }
            else{
                temp += "<img src='${basePath}/bootstrap/images/no_img.png' height='60' width='80' style='border:1px solid #ccc'>"
//                return "<div class='list-img'><span class='s-img'><img src="+data.contractUrl+" height='60'></span><span> "+data.protocolName+"</span></div>"
            }
            temp += "<span> "+data.protocolName+"</span>";
            temp += "</div>";
            return temp;
        }
        else if(id == "name"){
            return "<div class='list-name'><span>"+data.name+"</span>"+data.phone+"</div>";
        }
        else {
            if(data[id] == null || data[id] == ''){
                return '';
            }else{
                return data[id];
            }
        }
    }

    $(function(){
        $('#start_visit_time').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
//            startDate: new Date(),
            autoclose:true //选择日期后自动关闭

        });
    });

    //导出
    function exportOrderList(){
        layer.confirm('是否确定此操作？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            <#--//获取form表单传入参数-->
            <#--var jsonData ={};-->
            <#--$("#myForm").find("input").each(function(){-->
                <#--jsonData[$(this).attr('id')] = $(this).val();-->
            <#--});-->
            <#--$("#myForm").find("select").each(function(){-->
                <#--jsonData[$(this).attr('id')] = $(this).val();-->

            <#--});-->
            <#--$.ajax({-->
                <#--url: '${basePath}/admin/agent/order/queryOrder/xls',-->
                <#--//dataType: 'json',-->
                <#--type: 'POST',-->
                <#--cache: false,//IE浏览器会有缓存-->
                <#--data: jsonData,-->
                <#--contengType: "application/msexcel",-->
                <#--success: function (data) {-->
                    <#--console.log(data)-->
                <#--},-->
                <#--error: function(){-->
                    <#--console.log("error")-->
                <#--}-->
            <#--})-->

            //var key = $("#key").val();
            window.location.href='${basePath}/admin/agent/order/queryOrder/xls?status='+$("#status").val()+'&createTime='+$("#createTime").val()+'&queryStr='+$("#queryStr").val() + '&type=3';
            layer.closeAll();
        });
    }

    //详情
    function viewMeal(obj){
        window.location.href='${basePath}/admin/agent/order?pageName=agreeOrder_view&id='+obj.name;
    }


</script>
</body>
</html>